<template>
  <div>
    <el-form :label-position="'left'" label-width="150px">
      <el-form-item label="对应诉求:">
        <el-input v-model="demandDetail.title" disabled style="width:200px"></el-input>
      </el-form-item>
<!--      <el-form-item label="资讯详情">-->
      <div style="margin-bottom: 10px">诉求处理反馈：</div>
        <vue-ueditor-wrap v-model="detail" :config="myConfig"></vue-ueditor-wrap>
<!--      </el-form-item>-->
      <div class="add-table-wrapper">
        <el-button type="primary" @click="commit" class="add-table-wrapper-btn">保存</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
import PCORIGIN from '../../assets/json/pc-code.json';
import {demandReback} from "../../api";

export default {
  components: {},
  data() {
    return {
      detail: '',
      correlationVisible: false,
      demandDetailVisible: false,//需求的详情
      demandDetail: {user_info: {}},
      loading: false,
      PCORIGIN,
      id: '',
      photoImg: '',
      photoID: '',

      consumtationOption: '',//头部筛选的资讯类型
      consumtationOptions: [
        {label: '其他', value: 0}

      ],
      member: {
        consumtationOption: '',
        name: '',
        desc: '',
        sortNum: '',
        industry: '',
        address: [],
        representative: '',
        code: '',
        status: 0
      },
      status: false,
      tag: '',
      tagList: [],

      industryOptions: [{label: '互联网', value: 1}],

      correlationList: [],//模糊搜索的需求
      executor: '',
      executorList: [],//选中关联的需求
      myConfig: {
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 500,
        // 初始容器宽度
        initialFrameWidth: '100%',
        // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
        // serverUrl: 'http://35.201.165.105:8000/controller.php',
        // https://shop.rzkeji.com/ueditor-php/controller.php
        serverUrl: 'https://hks-sys.dindong.cn/ueditor-php/controller.php',
        // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
        // //UEDITOR_HOME_URL: '/static/UEditor/'
        //UEDITOR_HOME_URL: '/peoples_association_backstage/dist//static/UEditor/'
        toolbars: [
          [
            'undo', 'redo', '|',
            'bold', 'italic', 'underline', 'strikethrough',
            'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor',
            'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
            'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
            'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
            'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
            'simpleupload', 'insertimage', 'insertvideo', 'music',
            'horizontal', 'date', 'time',
            'inserttable'
          ]
        ]
      }

    }
  },
  methods: {

    async showDemandDetail() {
      let id = this.id;
      let res = await this.$api.getDemandDetail({demand_id: id});
      if (res.data.level == 'success') {
        this.demandDetail = res.data.data
        this.detail = res.data.data.reback_content
        this.detail = this.detail.replace(/<img[^>]*>/gi, function (match, capture) {
          return match.replace(/data-src/ig, 'src')
        });
        this.demandDetailVisible = true
      }

    },
    async commit() {
      let params = {
        content: this.detail,
        demand_id: this.id
      };
      let res = await this.$api.demandReback(params);
      if (res.data.level == 'success') {
        this.$message({
          type: 'success',
          message: res.data.message
        })
        setTimeout(() => {
          this.$router.go(-1)
        })

      } else {
        this.$message({
          type: 'error',
          message: res.data.message
        })

      }
    },
    initData() {

    }
  },
  mounted() {
    this.id = this.$route.query.id;
    this.showDemandDetail();
  },
}
</script>
<style lang="scss" scoped>
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px dashed #d9d9d9;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
  object-fit: contain;
}

.add-table-wrapper {
  display: flex;
  justify-content: center;
  padding: 30px 0;
}

.memberPicWrapper {
  display: flex;
  flex-wrap: wrap;
}

.memberPicDetail {
  text-align: center;
  margin: 0 10px;
  position: relative;

  .delete {
    width: 20px;
    height: 20px;
    position: absolute;
    top: -10px;
    right: -10px;
  }
}

.dialog-footer {
  text-align: center;
}

.executorList {
  display: flex;
  flex-wrap: wrap;

  div {
    margin: 10px;
    border: 1px solid #eee;
    border-radius: 5px;
    padding: 5px 10px;
  }
}
</style>
